<template>
  <div class='home-container'>
    <!-- 推荐歌单 -->
 <van-cell class="title" title="推荐歌单  "  />
 <van-grid :border="false" :column-num="3">
 <van-grid-item v-for="item in recomdendList" :key="item.id">
    <van-image
    width="110"
height="100"
     src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.cloud.itouchtv.cn%2F2019%2F0510%2F5d916afc50ea78f483b45d5e7f090062.gif&refer=http%3A%2F%2Fimg1.cloud.itouchtv.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639885241&t=0208221720b22445f5a972843ccd40c1" />
    <p class="music-name van-multi-ellipsis--l2">{{item.name}}</p>
  </van-grid-item>
 </van-grid>

    <!-- 最新音乐 -->
 <van-cell class="title"  title="最新音乐 "  />
 <!-- 封装音乐组件 每一首歌都是一个组件-->
<music-item :row='item'  v-for="item in newMusicList" :key="item.id"></music-item>

  </div>
</template>

<script>
import { getcommendList, getNewMusic } from '@/api/recommend.js'
import MusicItem from '@/components/MusicItem/index'
export default {
  name: 'home',
  components: {
    MusicItem
  },
  data () {
    return {
      recomdendList: [],
      newMusicList: []
    }
  },

  created () {
    this.personalized()
    this.getNewMusic()
  },

  methods: {
    async personalized () {
      try {
        const res = await getcommendList()
        this.recomdendList = res.data.result
      } catch (err) {
        console.log('错误了')
      }
    },
    async getNewMusic () {
      try {
        const res = await getNewMusic(20)
        this.newMusicList = res.data.result
        console.log(res)
      } catch (err) {
        console.log('出错')
      }
    }
  }
}
</script>

<style scoped lang='less'>
.home-container{
  .title {
    background-color: #c71d24;
    color:#fff;
    &.van-cell::after{
border-bottom:none
    }
  }
  .music-name{
font-size: 12px;
text-align: center;
line-height: 20px;
width: 100%;
padding: 0 5px;
box-sizing: border-box;
  }
  /deep/.van-grid-item__content {
padding: 10px 0px
  };
}
</style>
